<template>
	<div class="cart">
		 <van-nav-bar title='购物车' left-text="" left-arrow  @click-left='backfn'>
		 	<template #right>
		 		<van-icon name="ellipsis" size="18" />
		 	</template>
		 </van-nav-bar>
		 
		<ul class="list">
			<li v-for="item in cartData" :key="cartData.cartItemId">
				<van-checkbox v-model="item.checked">&nbsp;</van-checkbox>
				<img :src="item.goodsCoverImg" alt="">
				<div class="text">
				  {{item.goodsName}} 
				  <span>{{item.sellingPrice}}</span>
				  <van-stepper v-model="item.goodsCount" />
				</div>
			</li>
		</ul>
		
		<van-submit-bar :price="totalMoney" button-text="结算" @submit="onSubmit">
		  <van-checkbox v-model="checkAll">全选</van-checkbox>
		  <template #tip>
		    你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
		  </template>
		</van-submit-bar>
	</div>
</template>


<script>
export default {
  name: 'Cart',
  data(){
	  return{
		  
	  }
  },
  created(){
	this.$store.dispatch("asyncgetCartList");
  },
  methods:{
	backfn(){
		this.$router.back();
	},
	onSubmit(){
		this.$router.push("/addresslist")
	},
	onClickEditAddress(){
		
	}
  },
  computed:{
	cartData(){
	   console.log(this.$store.state.cartData)
	   return this.$store.state.cartData; 
	},
	totalMoney() {
		return this.cartData.reduce((result,item)=>{
			return result+(item.checked?item.goodsCount*item.sellingPrice*100:0)
		},0)
	},
	checkAll:{
		get(){
			return this.cartData.every(item=>item.checked)
		},
		set(val){
			this.cartData.map(item=>{
				item.checked=val;
			})
		}
	}
  }
}
</script>

<style lang="less" scoped>
	.cart{
		height:100%;
		width:100%;
		overflow: auto;
		padding-bottom:160px;
		/deep/.van-nav-bar__content{
			width:100%;
			position: fixed;
			background:#fff;
		}
		.van-submit-bar {
		  bottom: 50px;
		}
	}
	.list{
		padding-top:60px;
		li{
			display: flex;
			img{
				width:100px;
				height:100px;
				margin-left:10px;
			}
			.text{
				display: flex;
				flex-direction: column;
			}
		}
	}
</style>
